<template>
  <div class="img-container">
    <p>点击图片，试一试</p>
    <div>
      <img id="wuhanImage" src="@/assets/images/wuhan.jpg" alt="" @click="lightWuhan">
    </div>
  </div>
</template>
<script>
export default {
  methods: {
    lightWuhan() {
      var img = document.querySelector('#wuhanImage')
      // img.css('filter', 'grayscale(0)')// 错误方法
      img.style.filter = 'grayscale(0)'
    }
  }
}
</script>

<style lang="scss" scoped>
  .img-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 20px;

    img {
      width: 400px;
      height: 200px;
      filter: grayscale(100%);
      transition: filter 2.5s;
      // &:hover {
      //   filter:grayscale(0);
      // }
    }
  }
</style>
